<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ page isELIgnored="false" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <%
        if (request.getAttribute("sort_id") == null && request.getAttribute("keyword") != null) {
            request.setAttribute("sort_id", 0);
        }
    %>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>清歌一片</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/style.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="<%=request.getContextPath()%>/images/icon/icon.png">
    <link rel="shortcut icon" href="<%=request.getContextPath()%>/images/icon/favicon.ico">
    <script>
        // window.onload = function () {
        //     document.getElementById("moreMerchant").scrollIntoView();
        //     $('body').animate({
        //         scrollTop: $('.bottom').offset().top - $(window).height()
        //     }, 500);
        // }

        function getContextPath1() {
            return "<%=request.getContextPath()%>";
        }

        //加载动画
        var loading = getContextPath1() + "/images/loading.gif";
    </script>
    <script src="<%=request.getContextPath()%>/js/jquery-2.1.4.min.js"></script>
    <script src="<%=request.getContextPath()%>/js/nprogress.js"></script>
    <script src="<%=request.getContextPath()%>/js/jquery.lazyload.min.js"></script>
    <!--[if gte IE 9]>
    <script src="<%=request.getContextPath()%>/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/html5shiv.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/respond.min.js" type="text/javascript"></script>
    <script src="<%=request.getContextPath()%>/js/selectivizr-min.js" type="text/javascript"></script>
    <![endif]-->
    <!--[if lt IE 9]>
    <script>window.location.href = 'upgrade-browser.html';</script>
    <![endif]-->
</head>

<body class="user-select">
<jsp:include page="head.jsp" flush="true"/>
<section class="container">
    <div class="content-wrap">
        <div class="content">
            <div class="jumbotron">
                <h1>欢迎访问博客</h1>
                <p>在这里可以看到前端技术，后端程序，网站内容管理系统等文章，还有我的程序人生！</p>
            </div>
            <div id="focusslide" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#focusslide" data-slide-to="0" class="active"></li>
                    <li data-target="#focusslide" data-slide-to="1"></li>
                    <li data-target="#focusslide" data-slide-to="2"></li>
                </ol>
                <div class="carousel-inner" role="listbox">
                    <div class="item active"><a href="" target="_blank"><img
                            src="<%=request.getContextPath()%>/images/banner/banner_01.jpg" alt=""
                            class="img-responsive"></a>
                        <!--<div class="carousel-caption"> </div>-->
                    </div>
                    <div class="item"><a href="" target="_blank"><img
                            src="<%=request.getContextPath()%>/images/banner/banner_02.jpg" alt=""
                            class="img-responsive"></a>
                        <!--<div class="carousel-caption"> </div>-->
                    </div>
                    <div class="item"><a href="" target="_blank"><img
                            src="<%=request.getContextPath()%>/images/banner/banner_03.jpg" alt=""
                            class="img-responsive"></a>
                        <!--<div class="carousel-caption"> </div>-->
                    </div>
                </div>
                <a class="left carousel-control" href="#focusslide" role="button" data-slide="prev" rel="nofollow">
                    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span
                        class="sr-only">上一个</span> </a> <a class="right carousel-control" href="#focusslide"
                                                           role="button" data-slide="next" rel="nofollow"> <span
                    class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span
                    class="sr-only">下一个</span> </a></div>
            <article class="excerpt-minic excerpt-minic-index" id="targo">
                <h2><span class="red">【今日推荐】</span><a href="" title="">从下载看我们该如何做事</a></h2>
                <p class="note">一次我下载几部电影，发现如果同时下载多部要等上几个小时，然后我把最想看的做个先后排序，去设置同时只能下载一部，结果是不到一杯茶功夫我就能看到最想看的电影。
                    这就像我们一段时间内想干成很多事情，是同时干还是有选择有顺序的干，结果很不一样。同时...</p>
            </article>
            <div class="title">
                <h3>最新发布</h3>
                <div class="more"><a href="">java</a><a href="">JavaScript</a><a href="">EmpireCMS</a><a
                        href="">Apache</a><a href="">MySQL</a></div>
            </div>
            <%--文章列表--%>
            <c:if test="${articles==null}">
                <article class="excerpt excerpt-0" style="display: none;visibility: hidden;"></article>
            </c:if>

            <c:forEach items="${articles}" var="article">
                <article class="excerpt excerpt-1"><a class="focus"
                                                      href="<%=request.getContextPath()%>/front/article?article_id=${article.article_id}"
                                                      title=""><img class="thumb"
                                                                    data-original="${article.article_img}"
                                                                    src="${article.article_img}"
                                                                    alt=""></a>
                    <header><a class="cat" href="program">${article.sort_name}<i></i></a>
                        <h2><a href="<%=request.getContextPath()%>/front/article?article_id=${article.article_id}"
                               title="">${article.article_title}</a></h2>
                    </header>
                    <p class="meta">
                        <time class="time"><i class="glyphicon glyphicon-time"></i><fmt:formatDate
                                value="${article.article_date}" pattern="yyyy-MM-dd HH:mm:ss"/></time>
                        <span class="views"><i
                                class="glyphicon glyphicon-eye-open"></i> 共${article.article_views}人围观</span></p>
                        <p class="note">${article.article_describe}...</p>
                </article>
            </c:forEach>

            <c:if test="${sort_id!=0 && sort_id!=null &&sort_id!=77}">
                <nav class="pagination" style="display: none;">
                    <ul>
                        <li class="prev-page"></li>
                        <li class="active"><span>1</span></li>
                        <li><a href="?page=2">2</a></li>
                        <li class="next-page"><a
                                href="<%=request.getContextPath()%>/back/article/page2?nextPage=${nextPage}">下一页</a>
                        </li>
                        <li><span>共 ${pageNum} 页</span></li>
                    </ul>
                </nav>
            </c:if>
            <c:if test="${sort_id==0}">
                <nav class="pagination" style="display: none;">
                    <ul>
                        <li class="prev-page"></li>
                        <li class="active"><span>1</span></li>
                        <li><a href="?page=2">2</a></li>
                        <li class="next-page"><a
                                href="<%=request.getContextPath()%>/back/article/page?nextPage=${nextPage}">下一页</a>
                        </li>
                        <li><span>共 ${pageNum} 页</span></li>
                    </ul>
                </nav>
            </c:if>
            <%--使用搜索框--%>
            <c:if test="${sort_id==77}">
                <nav class="pagination" style="display: none;">
                    <ul>
                        <li class="prev-page"></li>
                        <li class="active"><span>1</span></li>
                        <li><a href="?page=2">2</a></li>
                        <li class="next-page"><a
                                href="<%=request.getContextPath()%>/back/article/page3?nextPage=${nextPage}">下一页</a>
                        </li>
                        <li><span>共 ${pageNum} 页</span></li>
                    </ul>
                </nav>
            </c:if>

        </div>
    </div>
    <jsp:include page="sidebar.jsp"></jsp:include>
</section>
<jsp:include page="bottom.jsp"/>
<!--微信二维码模态框-->
<div class="modal fade user-select" id="WeChat" tabindex="-1" role="dialog" aria-labelledby="WeChatModalLabel">
    <div class="modal-dialog" role="document" style="margin-top:120px;max-width:280px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="WeChatModalLabel" style="cursor:default;">微信扫一扫</h4>
            </div>
            <div class="modal-body" style="text-align:center"><img src="<%=request.getContextPath()%>/images/weixin.jpg"
                                                                   alt="" style="cursor:pointer"/></div>
        </div>
    </div>
</div>
<!--该功能正在日以继夜的开发中-->
<div class="modal fade user-select" id="areDeveloping" tabindex="-1" role="dialog"
     aria-labelledby="areDevelopingModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="areDevelopingModalLabel" style="cursor:default;">该功能正在日以继夜的开发中…</h4>
            </div>
            <div class="modal-body"><img src="<%=request.getContextPath()%>/images/baoman/baoman_01.gif" alt="深思熟虑"/>
                <p style="padding:15px 15px 15px 100px; position:absolute; top:15px; cursor:default;">
                    很抱歉，程序猿正在日以继夜的开发此功能，本程序将会在以后的版本中持续完善！</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">朕已阅</button>
            </div>
        </div>
    </div>
</div>

<script>
    window.onload = function () {
        document.getElementById("targo").scrollIntoView();
    }
</script>
<script src="<%=request.getContextPath()%>/js/bootstrap.min.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.ias.js"></script>
<script src="<%=request.getContextPath()%>/js/scripts.js"></script>
<script src="<%=request.getContextPath()%>/js/snow.js"></script>
</body>
</html>